<template>
  <div style="width: 100%; background-color: rgb(240, 242, 245)">
    <div class="dashboard-editor-container">
      <div class="block">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in srcs" :key="item">
            <!-- <el-image
            :src="item.title"
            @click="specific(item.path)"
            style="width: auto; height: auto; max-width: 100%; max-height: 100%"
          ></el-image> -->
            <img
              class="photo"
              :src="item.title"
              @click="specific(item.name, item.path)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="charts">
        <tableone @click="goTo('/one')" class="first-1" ref="chart1"></tableone>
        <tabletwo @click="goTo('/two')" class="first-2" ref="chart2"></tabletwo>
        <tablethree
          @click="goTo('/three')"
          class="first-3"
          ref="chart3"
        ></tablethree>
        <table-five
          @click="goTo('/five')"
          class="second-1"
          ref="chart5"
        ></table-five>
        <!-- <table-six @click="goTo('/six')" class="second-2" ref="chart6"></table-six> -->
        <tableseven class="second-2" ref="chart7"></tableseven>
        <tablefour
          @click="goTo('/four')"
          class="third"
          ref="chart4"
        ></tablefour>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup.vue";
import WordCloud from "./components/WordCloud.vue";
import tablethree from "./components/tablethree.vue";
import TableSix from "./components/tableSix.vue";
import TableFive from "./components/tableFive.vue";
import tableone from "./components/tableone.vue";
import tabletwo from "./components/tabletwo.vue";
import tablefour from "./components/tablefour.vue";
import tableseven from "./components/tableSeven.vue";

export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
    WordCloud,
    tablethree,
    TableSix,
    TableFive,
    tableone,
    tabletwo,
    tablefour,
    tableseven,
  },
  data() {
    return {
      srcs: [
        {
          title: require("../../assets/one.jpg"),
          name: "推文",
          path:
            "https://mp.weixin.qq.com/s?__biz=MzIxMTAwMTAzNg==&mid=2649672404&idx=1&sn=393e0a5743d9a03ff9e5ac5b359f66b9&chksm=8f466177b831e861465a133c7ce53df559ee396961647fe4ffe174b9b4dd44f060dab066e6e9&mpshare=1&scene=23&srcid=06014O9v2SkldiSuTAKothwr&sharer_sharetime=1622536284735&sharer_shareid=6122ea7560a57c7a91079f8db8fd18a9%23rd",
        },
        {
          title: require("../../assets/citys.png"),
          name: "城市词云",
          path: "",
        },
        {
          title: require("../../assets/company.png"),
          name: "公司词云",
          path: "",
        },
        {
          title: require("../../assets/table6.jpg"),
          name: "表六",
          path: "",
        },
      ], // 相对地址一定要require
    };
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.$refs.chart1.resize();
      this.$refs.chart2.resize();
      this.$refs.chart3.resize();
      this.$refs.chart7.resize();

      this.$refs.chart4.resize();
      this.$refs.chart5.resize();
      // this.$refs.chart6.resize();
    });
  },
  methods: {
    goTo(route) {
      this.$router.push(route);
    },
    specific(name, aim) {
      console.log(name);
      if (name == "推文") {
        window.open(aim, "_blank"); // 在新窗口打开外链接
      } else if (name == "表六") {
        this.goTo("/six");
      }
    },
  },
};
</script>

<style scoped>
.dashboard-editor-container {
  width: 80%;
  margin: 0 auto;
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.first-1 {
  width: 29.3%;
}

.first-2 {
  width: 29.3%;
}

.first-3 {
  width: 29.3%;
}

.second-1 {
  width: 50%;
}

.second-2 {
  width: 42%;
}

.third {
  width: 96%;
}

@media (max-width: 1350px) {
  .first-1 {
    width: 96%;
  }

  .first-2 {
    width: 96%;
  }

  .first-3 {
    width: 96%;
  }

  .second-1 {
    width: 96%;
  }

  .second-2 {
    width: 96%;
  }

  .third {
    width: 96%;
  }
}

/* 图片滚动样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #47505c;
  border-radius: 3px;
  border: #2a3036;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #5a5f64;
  border-radius: 3px;
  border: #2a3036;
}

.photo {
  /* height: auto; */
  height: 550px;
  /* max-height: 100%; */
  vertical-align: middle;
}

.block {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 8px;
}

/* 图表 */
.charts {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row; /* 水平方向 */
  flex-wrap: wrap; /* 超出换行 */
  justify-content: space-between;
}
</style>
